import { EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import {debounce} from 'lodash-es';
import styles from './index.module.scss';
import {useCallback} from "react";

type Props = {
  onChange: (content?: string)=>void;
};
export function Editor(props: Props){

  const onChange = useCallback(debounce(props.onChange, 600), [props.onChange]);

  const editor = useEditor({
    extensions: [
      StarterKit.configure({
        codeBlock: false,
        code: false,
      })
    ],
    onUpdate(){
      onChange(editor?.getHTML());
    }
  });

  return (
    <EditorContent
      className={styles.editor}
      editor={editor}
    />
  );
}